<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
body{
    background-image:url(微软/bg.jpg);
    background-size: cover;
}
input{
    width: 450px;
    height: 38px;
    margin-left: 20px;
}
button{
    width: 45px;
    height: 45px;
    background-image: url(微软/3.png);
    border: none;
    outline: none;
    cursor: pointer;
}
p{
    display: flex;
    align-items: center;
    position: absolute;
    top: 120px;
    left: 170px;
}
/*h6{display: inline;margin: 20px;color: brown-gre;font-size: 15px;}*/
ul.ul1 {
    margin: 0;
    padding: 0;
    float: left;
}
li {
    display: inline-block;
    margin: 0 10px;
    color: #666;
}
li:hover {
    color: #ddd;
    cursor: pointer;
}
.ul2 {
    float: right;
    margin: 0;
    padding: 0;
}
.ul3 {
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 0;
    background-color: #333;
    width: 100%;
    text-align: right;
    color: #666;
    height: 30px;
}
li {
 line-height: 30px;
}
    </style>
</head>
<body>

<ul class="ul1">
<li>图片</li>
<li>视频</li>
<li>学术</li>
<li>字典</li>
<li>地图</li>
<li>|</li>
<li>office online</li>
<li>outlookcom</li>
</ul>
<ul class="ul2">
    <li>Switch to Bing in English</li>
    <li>丨</li>
    <li>登陆</li>
</ul>

<p>
    <img src="微软/1.png" >
    <input type="text" >
    <button></button>
</p>
<ul class="ul3">
    <li>图片</li>
<li>视频</li>
<li>学术</li>
<li>字典</li>
<li>地图</li>
</ul>
</body>
</html>